<template>
  <div class="app-service-navbar" id="app-service-navbar">
    <div class="app-service-navbar__brand-wrapper">
      <app-brand type="navbar"></app-brand>
    </div>
    <ul class="app-service-navbar__items-wrapper" @click="switchItem">
      <!--<router-link ref="home" to="/service/charter" class="app-service-navbar__items-wrapper__item">首页</router-link>
      <router-link ref="charter" to="/service/charter" class="app-service-navbar__items-wrapper__item">微宪法</router-link>
      <router-link ref="habit" to="/service/habit" class="app-service-navbar__items-wrapper__item">微习惯</router-link>
      <router-link ref="topic" to="/service/topic" class="app-service-navbar__items-wrapper__item">微专题</router-link>
      <router-link ref="monitor" to="/service/monitor" class="app-service-navbar__items-wrapper__item">微状态</router-link>-->
      <li class="app-service-navbar__items-wrapper__item" :class="$stateHub.rolename === 'COUNTER_EMPLOYEE' ? 'app-service-navbar__items-wrapper__item--active' : ''">信息录入</li>
      <li class="app-service-navbar__items-wrapper__item" :class="$stateHub.rolename === 'MANAGER' ? 'app-service-navbar__items-wrapper__item--active' : ''">信息报送</li>
      <li class="app-service-navbar__items-wrapper__item" :class="$stateHub.rolename === 'LEADER' ? 'app-service-navbar__items-wrapper__item--active' : ''">信息审核</li>
    </ul>
    <div class="app-service-navbar__icons-wrapper">
      <i class="iconfont icon-sousuo app-service-navbar__icons-wrapper__icon"></i>
    </div>
    <div class="app-service-navbar__funcs-wrapper--auth" v-if="auth">
      <router-link tag="div" class="app-service-navbar__funcs-wrapper--auth__account-info" to="/account/security/logout">
        <div class="app-service-navbar__funcs-wrapper--auth__account-info__content">
          <div class="app-service-navbar__funcs-wrapper--auth__account-info__content__pic-wrapper">
            <img :src="tomatoPic"></img>
          </div>
          <div class="app-service-navbar__funcs-wrapper--auth__account-info__content__username">{{this.userRolename}} || {{ this.$stateHub.username  }}</div>
        </div>
      </router-link>
    </div>
    <div class="app-service-navbar__funcs-wrapper--unauth" v-else>
      <div class="app-service-navbar__funcs-wrapper--unauth__to-login">
        <router-link to="/account/security/actions/login">登录</router-link>
      </div>
      <div class="app-service-navbar__funcs-wrapper--unauth__vertical-division"></div>
      <div class="app-service-navbar__funcs-wrapper--unauth__to-register">
        <router-link to="/account/actions/register">注册</router-link>  
      </div>
    </div>
  </div>
</template>

<script>
  import appBrand from '@/components/brand';
  import tomato from '@/assets/favicon.jpg';
  
  export default {
    name: 'app-navbar',
    components: {
      appBrand,
    },
    data() {
      return {
        currentEl: null,
      };
    },
    computed: {
      auth() {
        return this.$stateHub.auth;
      },
      tomatoPic() {
        return tomato;
      },
      userRolename() {
        if (this.$stateHub.rolename === 'COUNTER_EMPLOYEE') {
          return '柜员';
        } else if (this.$stateHub.rolename === 'MANAGER') {
          return '经理';
        }
        return '领导';
      },
    },
    activated() {
      this.switchItem();
    },
    methods: {
      switchItem() {
//      const activeItem = this.$route.path.slice(9);
//      window.setTimeout(() => {
//        if (this.currentEl) {
//          this.currentEl.classList.remove('app-service-navbar__items-wrapper__item--active');
//        }
//        this.currentEl = this.$refs[activeItem].$el;
//        this.currentEl.classList.add('app-service-navbar__items-wrapper__item--active');
//      }, 50);
      },
    },
  };
</script>